<template>
	<view class="page page-block">
		<cl-message ref="message"></cl-message>
		<view v-if="$common.hasLogin" class="setting-wrapper">
			<cl-list v-for="(item, index) in list" :key="index" :border="false" :label="item.lable" @tap="click(item.type)">
				<text v-if="item.type <= 2" slot="append" class="userinfo">{{item.type == 0 ? user.phone : item.type == 1 ? user.email : user.qq}}</text>
				<text v-else slot="append" class="cl-icon-arrow-right"></text>
			</cl-list>
		</view>
		<view v-else class="tip-wrapper">
			<text>你还没有登录，请先登录</text>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-wrapper">
				<input v-if="type == 0" focus="true" type="number" maxlength="11" v-model="phoneCache" placeholder="请输入新的手机号" />
				<input v-if="type == 1" focus="true" type="text" maxlength="20" v-model="emailCache" placeholder="请输入新的邮箱" />
				<input v-if="type == 2" focus="true" type="number" maxlength="11" v-model="qqCache" placeholder="请输入新的QQ" />
				<view class="foot-wrapper">
					<view><button class="popup-btn" @click="close">取消</button></view>
					<view><button class="popup-btn" @click="confirm" style="margin-left: 20rpx;">确定</button></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				list: [{
						lable: "手机号",
						type: "0"
					},
					{
						lable: "邮箱",
						type: "1"
					},
					{
						lable: "QQ",
						type: "2"
					},
					{
						lable: "修改登录密码",
						type: "3",
						url: "/pages/setting/accountSecurity/changePassword/changePassword"
					},
					{
						lable: "修改支付密码",
						type: "4",
						url: "/pages/setting/accountSecurity/changePayPassword/changePayPassword"
					}
				],
				user: {
					uid: '',
					name: '',
					phone: '',
					email: '',
					gender: '',
					qq: '',
					photo: ''
				},
				phoneCache: '',
				emailCache: '',
				qqCache: '',
				type: 0
			}
		},
		methods: {
			click(type) {
				if (type <= 2) {
					this.$refs.popup.open();
					this.type = type;
				} else {
					if (type == 4) {
						//验证登录密码，成功才可以修改支付密码
					}
					uni.navigateTo({
						url: this.list[type].url
					})
				}
			},
			close() {
				this.$refs.popup.close();
				// 清除文本框输入的内容
				if (this.phoneCache.length > 0) {
					this.phoneCache = ''
				}
				if (this.emailCache.length > 0) {
					this.emailCache = ''
				}
				if (this.qqCache.length > 0) {
					this.qqCache = ''
				}
			},
			confirm() {
				// 校验手机号
				let user = {
					uid: this.user.uid,
					name: this.user.name,
					phone: this.user.phone,
					email: this.user.email,
					gender: this.user.gender,
					qq: this.user.qq,
					photo: null
				};
				if (this.type == 0) {
					if (!RegExp(/^1[3456789]\d{9}$/).test(this.phoneCache)) {
						this.$refs["message"].open({
							type: 'cancel',
							message: "手机号格式有误",
							duration: 2000,
							iconSize: 24
						});
						return
					}
					if (this.user.phone == this.phoneCache) {
						this.$refs["message"].open({
							type: 'cancel',
							message: "不能与原手机号相同",
							duration: 2000,
							iconSize: 24
						});
						return
					}
					user.phone = this.phoneCache;
				} else if (this.type == 1) { // 校验邮箱
					if (this.emailCache != null && this.emailCache != '' && !RegExp(
							/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/).test(
							this.emailCache)) {
						this.$refs["message"].open({
							type: 'cancel',
							message: "邮箱格式有误",
							duration: 2000,
							iconSize: 24
						});
						return
					}
					if (this.user.email == this.emailCache) {
						this.$refs["message"].open({
							type: 'cancel',
							message: "不能与原邮箱相同",
							duration: 2000,
							iconSize: 24
						});
						return
					}
					user.email = this.emailCache;
				} else if (this.type == 2) { // 校验QQ
					if (this.qqCache != null && this.qqCache != '' && !RegExp(/^\d{5,11}$/).test(this.qqCache)) {
						this.$refs["message"].open({
							type: 'cancel',
							message: "QQ格式有误",
							duration: 2000,
							iconSize: 24
						})
						return
					}
					if (this.user.qq == this.qqCache) {
						this.$refs["message"].open({
							type: 'cancel',
							message: "不能与原QQ相同",
							duration: 2000,
							iconSize: 24
						});
						return
					}
					user.qq = this.qqCache;
				}
				this.$common.request(this.$serverUrl + "user", user, "PUT", this.successCallback);
				this.$refs.popup.close();
				return
			},
			successCallback(res) {
				if (res.data.statusCode == "200") {
					if (res.data.msg == "ok") {
						this.$refs["message"].open({
							type: 'success',
							message: "修改成功",
							duration: 2000,
							iconSize: 24
						});
						if (this.type == 0) {
							this.user.phone = this.phoneCache;
						} else if (this.type == 1) {
							this.user.email = this.emailCache;
						} else if (this.type == 2) {
							this.user.qq = this.qqCache;
						}
					} else {
						this.$common.showModal(res.data.msg, false);
					}
					this.close();
				}
			},
			onLoad() {
				if (this.$common.hasLogin) {
					this.user = this.$common.user;
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .cl-message {
		&__content {
			font-size: 16px;
		}
	}

	/deep/ .cl-list {
		&__label {
			font-size: 16px;
		}
	}

	.setting-wrapper {
		padding: 20rpx 0;
	}

	.userinfo {
		font-size: 16px;
		color: #808080;
	}

	.tip-wrapper {
		height: 100%;
		background-color: #F2F1F6;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #8C8C8C;
		font-size: 16px;
	}

	/* 修改用户名 */
	.popup-wrapper {
		height: 200rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.foot-wrapper {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	input {
		font-size: 16px;
		color: #000000;
		background-color: #F5F5F5;
		margin-top: 30rpx;
		height: 60rpx;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		transition: 0.3s ease;
		border: solid 5rpx #F5F5F5;
	}

	input:hover {
		border: solid 5rpx #1f80ff;
	}

	.popup-btn {
		background-color: #FFFFFF;
		color: #2196F3;
	}

	.popup-btn:after {
		border: none;
	}
</style>
